<!DOCTYPE html>
<html lang="zh-Hans-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <nav>
    <ul class="menu">
      <li class="slider"></li>
      <li class="active">
        <span class="icon">
          <ion-icon name="home-outline"></ion-icon>
        </span>
        <span class="title">Home</span>
      </li>
      <li>
        <span class="icon">
          <ion-icon name="person-outline"></ion-icon>
        </span>
        <span class="title">Profile</span>
      </li>
      <li>
        <span class="icon">
          <ion-icon name="chatbubbles-outline"></ion-icon>
        </span>
        <span class="title">Messages</span>
      </li>
      <li>
        <span class="icon">
          <ion-icon name="settings-outline"></ion-icon>
        </span>
        <span class="title">Setting</span>
      </li>
      <li>
        <span class="icon">
          <ion-icon name="help-outline"></ion-icon>
        </span>
        <span class="title">Help</span>
      </li>
      <li>
        <span class="icon">
          <ion-icon name="lock-closed-outline"></ion-icon>
        </span>
        <span class="title">Password</span>
      </li>
      <li>
        <span class="icon">
          <ion-icon name="log-out-outline"></ion-icon>
        </span>
        <span class="title">Sign Out</span>
      </li>
    </ul>
  </nav>

  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
  <script>
    const menu = document.querySelector('.menu')
    const slider = document.querySelector('.slider')
    slider.style.transform = 'translateY(0px)'
    /**
     * @param {Event} e
     */
    function handleClick(e) {
      slider.style.transform = `translateY(${e.target.offsetTop}px)`
    }
    menu.addEventListener('click', handleClick)
  </script>
</body>

</html>